<template>
  <div class="welcome-page">
    <div class="welcome-card">
      <div class="welcome-header">
        <el-icon><School /></el-icon>
        <h1>欢迎使用神话学院管理系统</h1>
      </div>
      
      <div class="welcome-content">
        <p>恭喜您成功登录系统！</p>
        <p>当前您的账户没有访问系统页面的权限。</p>
        <p>请联系系统管理员为您分配相应的角色和权限。</p>
        
        <div class="contact-info">
          <h3>管理员联系方式：</h3>
          <ul>
            <li>📧 邮箱：admin@myth-college.edu</li>
            <li>📞 电话：010-12345678</li>
            <li>👤 联系人员：张老师</li>
          </ul>
        </div>
        
        <el-button type="primary" @click="handleLogout">退出登录</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { School } from '@element-plus/icons-vue'
import { useUserStore } from '@/stores/user'

const router = useRouter()
const userStore = useUserStore()

const handleLogout = async () => {
  try {
    await userStore.logout()
    router.push('/login')
  } catch (error) {
    ElMessage.error('退出登录失败')
  }
}
</script>

<style scoped lang="scss">
.welcome-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f0f9ff 0%, #e6f4ff 100%);
  padding: var(--spacing-xl);
}

.welcome-card {
  width: 500px;
  padding: var(--spacing-xl);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  box-shadow: var(--shadow-lg);
  text-align: center;
}

.welcome-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);

  h1 {
    margin: 0;
    color: var(--color-primary);
  }

  .el-icon {
    font-size: 36px;
    color: var(--color-primary);
  }
}

.welcome-content {
  p {
    margin: var(--spacing-md) 0;
    color: var(--text-secondary);
    line-height: 1.6;
  }
}

.contact-info {
  margin: var(--spacing-xl) 0;
  padding: var(--spacing-lg);
  background: var(--bg-light);
  border-radius: var(--radius-md);

  h3 {
    margin: 0 0 var(--spacing-md) 0;
    color: var(--text-primary);
  }

  ul {
    list-style: none;
    padding: 0;
    margin: 0;

    li {
      padding: var(--spacing-sm) 0;
      color: var(--text-secondary);
    }
  }
}
</style>